<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags" %>  
<c:set var="contextPath" value="<%=request.getContextPath()%>"></c:set> 
<!DOCTYPE html>
<html lang="en">
	<head>
		<title>Tables - Ace Admin</title>
		
		<script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery.js"></script>

		<script type="text/javascript">
		$(function(){
			
			function initTimer(){
				var resultTime = 0;
				var testTotalTime = Number('${remainingTime}');
				return testTotalTime;
			}
			
			function startTimer(totalSecend){
				$('#testTimer').text(formatTime(totalSecend));
				var timer = setInterval(function(){
					totalSecend--;
					if(totalSecend >= 0){
						$('#testTimer').text(formatTime(totalSecend));
						// 更新COOKIE
					}else{
						alert('考试结束');
						clearInterval(timer);
						assignment();
					}
				},1000);
			}
			
			function formatTime(totalSecend) {
				var hour = Math.floor(totalSecend / 3600);
				var min = Math.floor(totalSecend % 3600 / 60);
				var secend = (totalSecend % 60);
				hour = formatTimeNumber(hour);
				min = formatTimeNumber(min);
				secend = formatTimeNumber(secend);
				//console.log(hour + ':' + min + ':' + secend);
				return hour + ':' + min + ':' + secend;
			}
			
			function formatTimeNumber(timeNumber){
				if(timeNumber < 10){
					return "0" + timeNumber;
				}else{
					return timeNumber;
				}
			}
			
			function assignment(){
				$('#test-form').submit();
			}
			
			startTimer(initTimer());
			
			//确认是否删除
			$("#sub").click(function(){
				if(confirm("是否提交试卷？")){
					assignment();
					return true;					
				}else{
					return false;
				}
			});
			
			
			
		})
		</script>
		
	</head>

<body class="no-skin">
	<!-- /section:settings.box -->	
	<div class="page-content-area">	
		<span style="font-size:20px; margin:60px 0 120px 450px">离考试结束：<span id="testTimer" style="color:red"></span></span>
		<div class="row">
			<div class="col-xs-12">
				<!-- PAGE CONTENT BEGINS -->
				<div class="row">
					<div class="col-xs-12">
					 <form id="test-form" action="${contextPath}/student/assignment" method="post" >
					 	<input type="hidden" name="userId" value="${examUser.userId }" />
					 	<input type="hidden" name="subId" value="${subject.subId }" />
						<% int i = 1; %>
						<c:forEach items="${TestBySuject[1] }" var="test">
							<label><%=i %>、</label><span class="content">${test.content }</span>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:red">(<span class="test-type">${test.examTestType.testType }</span>,<span  class="test-type-score">${test.examTestType.testTypeScore }分</span>)</span><br>
							<label><input type="radio" name="test_${test.id }" value="A" >&nbsp;&nbsp;A、</label><span class="choose-a">${test.chooseA }</span><br>
							<label><input type="radio" name="test_${test.id }" value="B" >&nbsp;&nbsp;B、</label><span class="choose-a">${test.chooseB }</span><br>
							<label><input type="radio" name="test_${test.id }" value="C" >&nbsp;&nbsp;C、</label><span class="choose-a">${test.chooseC }</span><br>
							<label><input type="radio" name="test_${test.id }" value="D" >&nbsp;&nbsp;D、</label><span class="choose-a">${test.chooseD }</span><br>
							<% i++; %>					
						</c:forEach>
						<c:forEach items="${TestBySuject[2] }" var="test">
							<label><%=i %>、</label><span class="content">${test.content }</span>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:red">(<span class="test-type">${test.examTestType.testType }</span>,<span  class="test-type-score">${test.examTestType.testTypeScore }分</span>)</span><br>
							<label><input type="checkbox" name="test_${test.id }" value="A" >&nbsp;&nbsp;A、</label><span class="choose-a">${test.chooseA }</span><br>
							<label><input type="checkbox" name="test_${test.id }" value="B" >&nbsp;&nbsp;B、</label><span class="choose-a">${test.chooseB }</span><br>
							<label><input type="checkbox" name="test_${test.id }" value="C" >&nbsp;&nbsp;C、</label><span class="choose-a">${test.chooseC }</span><br>
							<label><input type="checkbox" name="test_${test.id }" value="D" >&nbsp;&nbsp;D、</label><span class="choose-a">${test.chooseD }</span><br>
							<% i++; %>					
						</c:forEach>										
					 </form>
					 <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button id="sub" class="btn btn-primary" type="submit">提交</button>
					</div>
				</div>
			</div>
				
				
				<div id="modal-table" class="modal fade" tabindex="-1">
					<div class="modal-dialog">
						<div class="modal-content">
							<div class="modal-header no-padding">
								<div class="table-header">
									<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
										<span class="white">&times;</span>
									</button>
									Results for "Latest Registered Domains
								</div>
							</div>
	
							<div class="modal-body no-padding">
								<table class="table table-striped table-bordered table-hover no-margin-bottom no-border-top">
									<thead>
										<tr>
											<th>Domain</th>
											<th>Price</th>
											<th>Clicks</th>
	
											<th>
												<i class="ace-icon fa fa-clock-o bigger-110"></i>
												Update
											</th>
										</tr>
									</thead>
	
									<tbody>
										<tr>
											<td>
												<a href="#">ace.com</a>
											</td>
											<td>$45</td>
											<td>3,330</td>
											<td>Feb 12</td>
										</tr>
	
										<tr>
											<td>
												<a href="#">base.com</a>
											</td>
											<td>$35</td>
											<td>2,595</td>
											<td>Feb 18</td>
										</tr>
	
										<tr>
											<td>
												<a href="#">max.com</a>
											</td>
											<td>$60</td>
											<td>4,400</td>
											<td>Mar 11</td>
										</tr>
	
										<tr>
											<td>
												<a href="#">best.com</a>
											</td>
											<td>$75</td>
											<td>6,500</td>
											<td>Apr 03</td>
										</tr>
	
										<tr>
											<td>
												<a href="#">pro.com</a>
											</td>
											<td>$55</td>
											<td>4,250</td>
											<td>Jan 21</td>
										</tr>
									</tbody>
								</table>
							</div>
	
							<div class="modal-footer no-margin-top">
								<button class="btn btn-sm btn-danger pull-left" data-dismiss="modal">
									<i class="ace-icon fa fa-times"></i>
									Close
								</button>
	
								<ul class="pagination pull-right no-margin">
									<li class="prev disabled">
										<a href="#">
											<i class="ace-icon fa fa-angle-double-left"></i>
										</a>
									</li>
	
									<li class="active">
										<a href="#">1</a>
									</li>
	
									<li>
										<a href="#">2</a>
									</li>
	
									<li>
										<a href="#">3</a>
									</li>
	
									<li class="next">
										<a href="#">
											<i class="ace-icon fa fa-angle-double-right"></i>
										</a>
									</li>
								</ul>
							</div>
						</div><!-- /.modal-content -->
					</div><!-- /.modal-dialog -->
				</div><!-- PAGE CONTENT ENDS -->
			</div><!-- /.col -->
		</div><!-- /.row -->
	</body>
</html>